<template>
  <view class="container">
    <text class="page-title">原材料详情</text>

    <view class="detail-item">
      <text class="detail-label">原材料ID：</text>
      <text class="detail-value">{{ goodsId }}</text>
    </view>

    <view class="detail-item">
      <text class="detail-label">原材料：</text>
      <text class="detail-value">{{ goodsName }}</text>
    </view>

    <view class="detail-item">
      <text class="detail-label">数量：</text>
      <text class="detail-value">{{ quantity }}</text>
    </view>

    <view class="detail-item">
      <text class="detail-label">调整数量：</text>
      <input type="number" v-model="adjustQuantity" class="input" placeholder="请输入调整数量" />
    </view>

    <view class="button-group">
      <van-button type="danger" round @click="onReportLoss">报损</van-button>
      <van-button type="primary" round @click="onReportOverflow">报溢</van-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goodsId: '',        // 商品ID
      goodsName: '',      // 商品名称
      quantity: '',       // 数量
      adjustQuantity: '', // 调整数量
    };
  },
  methods: {
    // 报损
    onReportLoss() {
      if (!this.adjustQuantity) {
        uni.showToast({ title: '请输入调整数量', icon: 'none' });
        return;
      }
      uni.showModal({
        title: '确认报损',
        content: `确定要报损 ${this.adjustQuantity} 吗？`,
        success: (res) => {
          if (res.confirm) {
            this.submitAdjustment('2'); // 2为报损
          }
        }
      });
    },

    // 报溢
    onReportOverflow() {
      if (!this.adjustQuantity) {
        uni.showToast({ title: '请输入调整数量', icon: 'none' });
        return;
      }
      uni.showModal({
        title: '确认报溢',
        content: `确定要报溢 ${this.adjustQuantity} 吗？`,
        success: (res) => {
          if (res.confirm) {
            this.submitAdjustment('1'); // 1为报溢
          }
        }
      });
    },

    // 提交调整
    submitAdjustment(recordType) {
      const data = {
        recordType,
        quantity: this.adjustQuantity,
        goodsId: this.goodsId,
      };
      this.loading = true;
      const url = this.$C.api_url + 'api/minInventory/checkInventory';
	  let token = uni.getStorageSync('token');
      uni.request({
        url,
        method: 'POST',
        data: data,
		header:{
			'satoken':token
		},
        success: (res) => {
          console.log(res.data)
          if (res.data.code === 200) {
            uni.showToast({ title: '提交成功', icon: 'success' });
            // 延迟一秒后跳转
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/inventoryCheck/inventoryCheck', // 指定路径，确保重新加载页面
                success: function () {
                  console.log('页面已重新加载');
                }
              });
            }, 1000); // 延迟 1000 毫秒（1秒）
          } else {
            uni.showToast({ title: res.data.message, icon: 'error' });
          }
        },
        fail: (err) => {
          console.error('请求失败', err);
        },
        complete: () => {
          this.loading = false;
        },
      });
    }
  },
  onLoad(options) {
    this.goodsId = options.goodsId || '';
    this.goodsName = options.goodsName || '';
    this.quantity = options.quantity || '';
  }
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #f4f7fb; 
  min-height: 100vh; /* 确保背景全屏 */
  box-sizing: border-box;
}

.page-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

.detail-item {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-label {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  flex-shrink: 0; /* 确保标签不缩小 */
}

.detail-value {
  font-size: 16px;
  color: #555;
}

.input {
  width: 150px; /* 控制输入框宽度 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  margin-left: 10px; /* 增加左边距以与标签分开 */
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>